import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
    ListWapper,
    ListWapperItem,
    ListWapperItemInfo,
} from '../style'
    ;
class List extends Component {
    render() {
        const { list } = this.props;
        return (
            <ListWapper>
                {
                    list.map((item, index) => {
                        return (
                            // 动态路由
                            <Link key={index} to={'/detail/' + item.get('id')}>
                                <ListWapperItem >
                                    <ListWapperItemInfo>
                                        <h3>{item.get('title')}</h3>
                                        <p className="title">
                                            {item.get('desc')}
                                        </p>
                                    </ListWapperItemInfo>
                                    <img className="list-item-img" src={item.get('imgUrl')} alt=""/>
                                </ListWapperItem>
                            </Link>
                        )
                    })
                }
            </ListWapper>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        list: state.getIn(['home', 'listData'])
    }
}
export default connect(mapStateToProps, null)(List);